<template>
  <!-- v-if="getIsShowCardBtns" -->
  <Box :content-p-top="0" :warp-m-bottom="0">
    <scroll-view :scroll-x="true" enable-flex enhanced :show-scrollbar="false" class="card-btn">
      <template v-if="detail">
        <!-- v-if="detail?.phone && detail.mobileDisplay" -->
        <view class="card-btn-item" @click="makePhoneCall(detail?.phone)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-5.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">联系电话</view>
            <view class="card-btn-item--content">{{ detail.phone }}</view>
          </view>
        </view>
        <!-- v-if="detail?.wechatId && detail.wechatIdDisplay" -->
        <view class="card-btn-item" @click="setClipboardData(detail?.wechatId)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-11.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">个人微信</view>
            <view class="card-btn-item--content">{{ detail.wechatId }}</view>
          </view>
        </view>
        <!-- v-if="detail?.email && detail.emailDisplay" -->
        <view class="card-btn-item" @click="setClipboardData(detail?.email)">
          <image
            class="card-btn-item--icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-10.png"
            mode="scaleToFill"
          />
          <view>
            <view class="card-btn-item--label">联系邮箱</view>
            <view class="card-btn-item--content">{{ detail.email }}</view>
          </view>
        </view>
      </template>
    </scroll-view>
  </Box>
</template>

<script setup lang="ts">
  import { type PersonalCardDetailsResult } from '@/api/card/types';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { Toast } from '@/utils';
  import { isLogin } from '@/utils/is';
  import { storeToRefs } from 'pinia';
  import { computed, type PropType } from 'vue';
  import Box from '../../components/box/index.vue';
  import { copyTextIsHide } from '../../components/utils';

  const props = defineProps({
    detail: Object as PropType<PersonalCardDetailsResult>,
  });

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const emit = defineEmits(['refresh']);

  /** 拨打电话 */
  function makePhoneCall(phoneNumber?: string) {
    if (userInfo.value.phonenumber) {
      if (phoneNumber && !copyTextIsHide(phoneNumber)) {
        uni.makePhoneCall({ phoneNumber });
      }
    } else {
      isLogin(() => emit('refresh'));
    }
  }

  const getIsShowCardBtns = computed(() => {
    const data = props.detail;
    if (!data) return;
    const { phone, wechatId, email, mobileDisplay, wechatIdDisplay, emailDisplay } = data;
    return (phone && mobileDisplay) || (wechatId && wechatIdDisplay) || (email && emailDisplay);
  });

  /** 复制内容 */
  function setClipboardData(text?: string) {
    if (userInfo.value.phonenumber) {
      if (text && !copyTextIsHide(text)) {
        uni.setClipboardData({
          data: text,
          success: () => Toast('复制成功', 'success', 1500),
        });
      }
    } else {
      isLogin(() => emit('refresh'));
    }
  }
</script>

<style scoped lang="scss">
  .card-btn {
    display: flex;
    height: 115rpx;
    margin: 0 -30rpx;
    width: 100vw;
    &-item {
      width: max-content;
      height: inherit;
      background: linear-gradient(141deg, #fff4dc 0%, #fffbf3 100%);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      padding-left: 15rpx;
      padding-right: 30rpx;
      margin-left: 30rpx;
      &--icon {
        width: 62rpx;
        height: 62rpx;
        margin-right: 14rpx;
      }
      &--label {
        font-size: 27rpx;
        color: #333;
        margin-bottom: 5rpx;
        white-space: nowrap;
      }
      &--content {
        color: #808080;
        font-size: 23rpx;
        white-space: nowrap;
      }
    }
  }
</style>
